<template>
	<view class="p-12 text-white">
		<view class="bg-black-1 round-12 py-15 px-20">
			<view class="flex flex-y-center gap-10">
				<image :src="USERINFO?.avatar?USERINFO?.avatar:WEBCONFIG?.web_logo" class="avatar round-circle"></image>
				<view class="flex-1">
					<view class="mb-4 flex flex-y-center gap-6">
						<text class="fs-17 fw-600 ">{{USERINFO?.nickname}}</text>
						<y-level :level="USERINFO?.level"></y-level>
					</view>
					<text class="fs-14 text-grey-1">推荐人:{{USERINFO?.parent_name ||'平台'}}</text>
				</view>
			</view>
			<view class="grid-columns-3 gap-6 text-center mt-20 ">
				<view class="flex flex-column   gap-4  gap-4 relative">
					<text class="fs-18 fw-600">{{detail?.teamCount}}</text>
					<text class="fs-14 text-grey-1">团队总数(人)</text>
					<view class="line absolute right-0 w-1 h-p-100"></view>
				</view>
				<view class="flex flex-column gap-4  gap-4 ">
					<text class="fs-18 fw-600">{{detail?.firstCount}}</text>
					<text class="fs-14 text-grey-1">一级团队(人)</text>
				</view>
				<view class="flex flex-column gap-4  gap-4 ">
					<text class="fs-18 fw-600">{{detail?.secondCount}}</text>
					<text class="fs-14 text-grey-1">二级团队(人)</text>
				</view>
			</view>
		</view>
		<y-title class="mt-12">邀请明细</y-title>
		<view class="mt-12">
			<y-tabs :list="tabsList" @onChange="paging.reload()" v-model="query.type"></y-tabs>
			<view class=" bg-black-1 round-8  flex flex-y-center pl-10   gap-4 mt-15">
				<text class="iconfont icon-sousuo"></text>
				<view class="flex-1">
					<input class="fs-14" placeholder="请输入用户昵称" v-model="query.nickname" />
				</view>
				<view class="gradient text-white px-16 py-8 round-8 w-60 m-4  fs-14 flex flex-center fs-14 fw-600"
					@click="paging.reload()">搜索
				</view>
			</view>

			<z-paging ref="paging" v-model='list' @query="getList" use-page-scroll>
				<template v-for="(item,index) in list" :key='index'>
					<view class="mt-12 bg-black-1  round-12 p-15">
						<view class="flex  gap-10">
							<image :src="item?.avatar" class="w-50 h-50 round-circle mt-4">
							</image>
							<view class="flex-1">
								<view class="mb-4 flex flex-y-center gap-4">
									<text class="fs-15 fw-600">{{item?.nickname}}</text>
									<view class=" first py-4 px-12 round-30 fs-12"
										v-if="item?.first_uid==USERINFO?.id">
										一级推荐
									</view>
									<view class=" second py-4 px-12 round-30 fs-12"
										v-if="item?.second_uid==USERINFO?.id">
										二级推荐
									</view>
								</view>
								<y-level :level="item?.level"></y-level>
								<text class="fs-11 text-grey-4">加入时间:{{item.create_at}}</text>
							</view>
						</view>
						<view class="flex mt-12">
							<view class="flex flex-column text-center  gap-4   relative pr-20">
								<text class="fs-18 fw-600">{{getTotal(item)}}</text>
								<text class="fs-13 text-grey-1">总创收(元)</text>
								<view class="line absolute right-0 w-1 h-p-100"></view>
							</view>
							<view class="grid-columns-2 gap-6 text-center  flex-1">
								<view class="flex flex-column gap-4  gap-4 " >
									<text class="fs-18 fw-600" v-if="item.first_uid==USERINFO.id">{{item?.first_vip_contribute}}</text>
									<text class="fs-18 fw-600" v-if="item.second_uid==USERINFO.id">{{item?.second_vip_contribute}}</text>
									<text class="fs-13 text-grey-1">推荐会员(元)</text>
								</view>
								<view class="flex flex-column gap-4  gap-4 ">
									<text class="fs-18 fw-600" v-if="item.first_uid==USERINFO.id">{{item?.first_point_contribute}}</text>
									<text class="fs-18 fw-600" v-if="item.second_uid==USERINFO.id">{{item?.second_point_contribute}}</text>
									<text class="fs-13 text-grey-1">充值(元)</text>
								</view>
							</view>
						</view>
					</view>

					<!-- #ifdef MP-WEIXIN -->
					<view class="p-12 overflow-hidden"
						v-if="WEBCONFIG?.wx_ad_status.includes('wx_video')&&(index+1)%5==0 ">
						<ad :unit-id="WEBCONFIG?.wx_video" ad-theme="white"></ad>
					</view>
					<!-- #endif -->
				</template>

			</z-paging>
		</view>
	</view>
</template>

<script setup>
	import useZPaging from "@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js";
	import { $http, $page } from '@/utils';
	import { useRefs, useUserStore, useWebConfigStore } from '@/stores'
	import { onLoad, onPageScroll, onReachBottom } from '@dcloudio/uni-app'
	import { computed, ref } from 'vue';
	const { USERINFO } = useRefs(useUserStore())
	const { WEBCONFIG } = useRefs(useWebConfigStore())

	const getTotal = (e) => {
		let number = 0;
		if (e.first_uid == USERINFO?.value.id) {
			number = (e.first_vip_contribute * 1) + (e.first_point_contribute * 1)
		}
		if (e.second_uid == USERINFO?.value.id) {
			number = (e.second_vip_contribute * 1) + (e.second_point_contribute * 1)
		}
		return number.toFixed(2)
	}
	const query = ref({
		type: 0,
		nickname: ''
	})
	const paging = ref()
	const list = ref([])
	useZPaging(paging)
	onLoad(() => {
		getTeamInfo()
	})
	const detail = ref({
		orderPrice: '--',
		orderCount: '--',
		teamCount: '--',
		firstCount: '--',
		secondCount: '--'
	})
	const getTeamInfo = () => {
		$http.get('Team/getTeamInfo').then(res => {
			detail.value = res.data
		})
	}

	const getList = (page, limit) => {
		uni.showLoading({
			title: '加载中...'
		})
		$http.get('Team/getTeamList', { page: page, limit: limit, ...query.value }).then(res => {
			paging.value.complete(res.data)
		})
	}

	const tabsList = [
		{ label: '全部', value: 0 },
		{ label: '一级推荐', value: 1 },
		{ label: '二级推荐', value: 2 },
	];
</script>

<style>
	.line {
		background: linear-gradient(180deg, rgba(196, 196, 196, 0) 0%, #C4C4C4 49%, rgba(196, 196, 196, 0) 100%);
	}

	.first {
		color: #26FFFF;
		border: 1px solid #26FFFF;
		background-color: rgba(38, 255, 255, 0.2);
	}
	
	.second{
		color:#FDAB5B;
		border: 1px solid #FDAB5B;
		background-color: rgba(253, 171, 29, 0.2);
	}
</style>